<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="da-header-left">
              <d-row [dSpace]="15" [dAlign]="'center'" [dSpaceDirection]="'horizontal'">
                <d-col>
                  <div class="da-header-item-label">{{ 'datadev.clusterName' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="clusterName" [(ngModel)]="searchFormConfig.clusterName" (keyup.enter)="refreshTable()" />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'datadev.clusterType' | translate }}:</div>
                </d-col>
                <d-col style="width: 164px">
                  <d-select
                    [options]="clusterTypeList"
                    name="clusterType"
                    [filterKey]="'label'"
                    [allowClear]="true"
                    [(ngModel)]="searchFormConfig.clusterType"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    (valueChange)="refreshTable()"
                  >
                    <ng-template let-option="option"> {{ option['label'] }} </ng-template>
                  </d-select>
                </d-col>
              </d-row>
            </div>
            <div class="header-right">
              <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="refreshTable()">{{
                'app.common.operate.query.label' | translate
              }}</d-button>
              <d-button bsStyle="common" (btnClick)="reset()">{{ 'app.common.operate.reset.label' | translate }}</d-button>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="header-left"></div>
            <div class="header-right">
              <d-button-group>
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevClusterAdd)"
                  bsStyle="primary"
                  (btnClick)="openAddClusterDialog()"
                  >{{ 'app.common.operate.new.label' | translate }}</d-button
                >
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevClusterDelete)"
                  bsStyle="common"
                  (btnClick)="openDeleteClusterDialog(dataTable.getCheckedRows())"
                  [disabled]="!dataTableChecked"
                  >{{ 'app.common.operate.delete.label' | translate }}</d-button
                >
              </d-button-group>
            </div>
          </div>
          <div class="list-content" id="dataTableContent">
            <d-data-table
              #dataTable
              [dataSource]="dataTableDs"
              [resizeable]="true"
              [checkable]="true"
              [tableLayout]="'fixed'"
              [scrollable]="true"
              [fixHeader]="true"
              (rowCheckChange)="getDataTableCheckedStatus()"
              (checkAllChange)="getDataTableCheckedStatus()"
            >
              <d-column field="clusterName" header="{{ 'datadev.clusterName' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="clusterType" header="{{ 'datadev.clusterType' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.label }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="clusterHome" header="{{ 'datadev.clusterHome' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="clusterVersion" header="{{ 'datadev.clusterVersion' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <!-- <d-column field="clusterConf" header="{{ 'datadev.clusterConf' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column> -->
              <d-column field="createTime" header="{{ 'datadev.createTime' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="updateTime" header="{{ 'datadev.updateTime' | translate }}">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}">
                <d-cell>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <div class="btn-group over-flow-ellipsis">
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevClusterEdit)"
                        icon="icon-edit"
                        bsStyle="text-dark"
                        (btnClick)="openEditClusterDialog(rowItem)"
                        title="{{ 'app.common.operate.edit.label' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevClusterDelete)"
                        icon="icon-delete"
                        bsStyle="text-dark"
                        (btnClick)="openDeleteClusterDialog([rowItem])"
                        title="{{ 'app.common.operate.delete.label' | translate }}"
                      ></d-button>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <ng-template #noResultTemplateRef>
                <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
              </ng-template>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <div class="footer-left"></div>
            <div class="footer-right">
              <d-pagination
                size=""
                [total]="pager.total"
                [(pageSize)]="pager.pageSize"
                [(pageIndex)]="pager.pageIndex"
                [canViewTotal]="true"
                [canChangePageSize]="true"
                [canJumpPage]="true"
                [maxItems]="5"
                (pageIndexChange)="refreshTable()"
                (pageSizeChange)="refreshTable()"
              >
              </d-pagination>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>
  </div>
</div>
